<template>
   <el-aside class='editor-left-panel' width='300px'>
     <div class='panel-title'>
       <h6>组件库</h6>
     </div>
     <el-scrollbar style='height: 100%'>
       <ul class='scrollbar-wrapper'>
         <li class='wrapper-item' v-for="(item, index) in componentsList" :key='index'>
           <div class='wrapper-item-title'>
             <p>{{ item.title }}</p>
           </div>
           <template v-if='item.components && item.components.length'>
             <div class='components-item-row'>
               <div class='components-item' v-for='(component, cdx) in item.components' :key='cdx'
               @click='componentClick(component)'>
                 <div class='components-item-icon'>
                   <i :class='[`icon`, `${component.icon}` ]'></i>
                 </div>
                 <div class='components-item-title'>{{ component.title }}</div>
               </div>
             </div>
           </template>
         </li>
       </ul>
     </el-scrollbar>
   </el-aside>
</template>

<script>
import { camelCase } from 'loadsh';
import elementConfig from '../config/element.config';
import { registerComponents } from '../plugins/index';

window.registerComponents = registerComponents;
console.log(registerComponents);
export default {
  name: 'editSilder',
  data() {
    return {
      componentsList: elementConfig,
    };
  },
  methods: {
    // 点击添加组件到面板
    componentClick(item) {
      // eslint-disable-next-line no-param-reassign
      // item.elName = camelCase(item.elName);
      const props = this.getDefaultProps(item.elName);
      this.$store.dispatch('addElement', { ...item, needProps: props });
    },
    /**
     * 获取组件默认的props
     * @param { string } name 组件名称
    * */
    getDefaultProps(name) {
      let componentData = null;
      // 找对对应组件的对象
      for (const key in registerComponents) {
        if (key.toLowerCase() === camelCase(name).toLowerCase()) {
          componentData = registerComponents[key];
          break;
        }
      }
      if (!componentData) return {};
      const props = {};
      console.log('props', componentData);
      for (const key in componentData.props) {
        props[key] = [Object, Array].includes(componentData.props[key].type)
          ? componentData.props[key].default() : componentData.props[key].default;
      }
      return props;
    },
  },
};
</script>

<style scoped>

</style>
